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SVG Tutorial 


SVG Tutorials as Video 

SVG is for Vector Graphics 

SVG is Ideal for Generated Images / Graphs / Diagrams 
Scripting SVG 

Topics Covered in This SVG Tutorial 


SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are 
specified in XML. The XML is then rendered by an SVG viewer. Today most web browser 
can display SVG just like they can display PNG, GIF, and JPG. 


SVG is for 2-dimensional vector graphics. For a 3-dimensional format lookup X3D. 


If you are not sure if SVG is right for you or your project, take a quick look at the SVG 
Examples page to get a quick overview at the capabilities of SVG. 


SVG Tutorials as Video 


| have a video version of this text here: 


| also have a YouTube play list for all my SVG videos. 


SVG is for Vector Graphics 


Being a vector graphics format SVG is mostly useful for vector type diagrams like: 


1. Two-dimensional graphs in an X,Y coordinate system. 

2. Column charts, pie charts etc. 

3. Scalable icons and logos for web, tablet and mobile apps and webapps. 
4. Architecture and design diagrams 

5. etc. 


Being a "Vector Graphics" format the shapes to be displayed are stored as vectors or 
vector-like structures. In other words, as numbers. Not as pixels. 


Being "Scalable" means that the viewer can scale the SVG image up and down in size 
without loss of quality. This is possible because the graphics are defined as numbers 
instead of pixels. Scaling the SVG image up or down just means multiplying or dividing the 
numbers defining the SVG shapes. 





SVG is not ideal for bitmap graphics like photos, movies etc. although you can embed 
bitmap graphics in an SVG image. This can be a handy way to draw shapes or text ontop 
of a bitmap image. 


SVG is Ideal for Generated Images / Graphs / Diagrams 


Being an XML format (a textual format) SVG is rather easy to generate from within a 
Servlet, JSP, ASP.NET, PHP or other web application technology. This makes SVG ideal 
for computer-generated graphs and diagrams. Interestingly, you often need to generate 
exactly the type of diagrams for which SVG is ideal (graphs, charts, diagrams etc.) in web 
applications. This makes SVG an even better match for generating graphs and diagrams. 


Scripting SVG 


It is possible to modify SVG images generated in the browser via JavaScript. This makes it 
possible to use SVG for more dynamic presentations, and even small games (though it is 
probably better to use HITML5 Canvas for games). 


Topics Covered in This SVG Tutorial 


The purpose of this tutorial is to get you up and running with SVG in a short time, and to 
be able to use the tutorial as a quick reference afterwards as well. While | will try to cover 
as much as possible of SVG, it is not the intention to cover each and every little bit of the 
SVG specification. Once you have a decent understanding of the basics you can easily 
consult the SVG specification on more advanced or special case topics. 
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SVG tref Element 
SVG textpath Element 
SVG switch Element 
SVG image Element 
SVG defs Element 
SVG symbol Element 
SVG use Element 
SVG and CSS 

SVG stroke 

SVG fill 

SVG Viewport and View Box 
SVG Animation 

SVG Scripting 

SVG Transformation 
SVG Gradients 

SVG Fill Patterns 
SVG Clip Path 

SVG Masks 

SVG Filters 





SVG Examples 


This page contains a collection of SVG images which illustrate a wide range of SVG's 
capabilities. I'll let the images speak for themselves. When relevant, the text below an 
image / shape is a link to the text explaining how to draw that shape, or achieve that effect 
etc. 


NOTE: If you cannot see any of the images below, your browser is not able to show SVG. 
You might be able to fix that by installing the Adobe SVG Viewer. 


Basic Shapes 
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Lines Rectangles Circles Ellipses Polygons Polylines 


Advanced Shapes (Paths) 
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Arcs Quadratic Bezier Curves Cubic Bezier Curves 
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Transformations 
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Linear Gradients Radial Gradients 


Opacity Gradients 
Links 


http://jenkov.com Click Retangle: 


Animation 





Use Cases 


Bar Charts Pie Charts 


Or... 


- Sequence Diagrams 
- Class Diagrams 

- Architecture Layers 
- Flow Charts 

- Use Case Diagrams 


- Gantt Charts 
- PERT Charts 
- Progress Bars 
- Speedometers 


- Interactive Web Graphics (links + on mouse over / out anims etc.) 


- etc. 





A Simple SVG Example 


SVG images can be very simple, or very complex. Here is a simple example: 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.org/1999/xlink"> 
<rect x="10" y="10" height="100" width="100" 
style="stroke:#ff0000; fill: #eQ00ff"/> 
</svg> 


As you can see this example is plain XML. 


The example shows a simple rectangle with a width of 100 pixels and a height of 100 
pixels. The stroke color (the rectangle outline) is set to the HTML color #fF@Q@08@. The fill 
color is set to OQOQOFF. 


The resulting SVG image is shown below: 


Displaying SVG in Web Browsers 


Displaying SVG in web browsers like Chrome, Firefox and Internet Explorer can be done 
in several ways: 


e Point the browser to the URL of the SVG file. 
e Embed SVG inside an HTML page 


You can embed an SVG image in an HTML file in several ways: 
Using an iframe style="display:none;" element 
Using an img element 
Using the SVG image as background image. 


Using an svg element 
Using an embed element 


Video Version of Tutorial 


If you prefer to watch this tutorial as video, | have made a screencast: 





Since the browsers can show SVG images if you type in the URL to the SVG image, you 
can also include an SVG image in your HTML page by using an iframe 
style="display:none;". Here is an example: 

<iframe style="display:none;" 
height="200" > 


src="mySvgImage.svg" width="2@e" 


img 
Embedding an SVG image using an img element is done just like any other type of 
image. You write the URL of the SVG image in the src attribute of the img element, like 
this: 

<img src="/svg/circle-element-1.jsp"> 


The SVG image is then shown in the HTML page, just like any other image. 


SVG as Background Images 


Since the browsers treat SVG images just like bitmap images, you can use SVG images 
as background images via CSS. Here is an example: 


div { 
background-image: url('my-svg-image.svg' ); 
background-size : 10@px 10@px; 


It may be necessary to set a background size for the SVG image, to tell the browser how 
to scale it. You can read more about background images in my CSS background image 
tutorial. 


svg Element Inside HTML 


Embedding an SVG image using the svg element can be done by embedding an svg 
element directly in an HTML page, like this: 


<div> 
<svg> 
<circle cx="40" cy="40" r="24" style="stroke: #006600; 
fi11:#00cc00"/> 
</svg> 
</div> 





The div element is just here to illustrate that the svg element can be embedded directly 
in HTML. The svg element does not have to be embedded in a div element though. 


Using the SVG element you can embed SVG directly in the HTML page, instead of putting 
the SVG image in its own file. You can set the width and height of the SVG image by 


adding width and height attributes to the svg element. 


Using the svg element you can also generate SVG directly in the browser using 
JavaScript. The D3 JavaScript API is very good at that. The jQuery JavaScript API could 
do that too. 


Using the svg element you can also style the Svg and its child elements using CSS, just 
like you would with any other HTML. Note that the SVG elements sometimes have 
different names for some of their CSS properties than HTML elements. 


embed 


In the early days of SVG you could embed SVG images using the embed element. Back 
then not all browsers had native support for SVG. Today | would recommend using either 
the img or svg elements instead. Here is an example embed element example for 
historic reasons though: 


<embed src="/svg/simple-example-1.jsp" 
width="300" height="220" 
type="image/svg+xml" 
pluginspage="http: //www.adobe.com/svg/viewer/install/" /> 


Place this element where you want the SVG image to be displayed in your HTML file. The 
Src attribute should point to the URL of the SVG image. 


Notice the pluginspage attribute. This is necessary in older browsers not capable of 
displaying SVG natively. These browsers need Adobe's SVG Viewer plugin to display the 
image. In Internet Explorer 7 and Firefox 3.0.5 this attribute is not necessary, but it doesn't 
hurt to include it. 


Width and Height 


Regardless of whether you use the img, Svg or embed element to embed your SVG 


image, the width and height of the image can be set using width and height attributes. 
If your image in the SVG file is wider or taller than these numbers, only part of the SVG 
image will be displayed. Make sure you set width and height large enough to display the 
full SVG image (or as much as you want to display). 
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Using SVG as Background Images of HTML Elements 


You can use SVG images as background images of HTML elements using the CSS 


background - image property. Just point to the SVG image file like you would with any 
other image file. Not all browsers may yet fully support this, to test it in the browsers you 
plan to support. Here is an example: 


-myCSSClass { 
background: url(/mySvgImage. svg) ; 
} 


Browser Support 


Internet Explorer 9 and later can display SVG natively. Firefox, Chrome, Safari, Opera and 
the Android browser have been able to show SVG natively for a while, at the time of 
writing. That is also true for Safari for iOS, Opera's mini and mobile browsers, and Chrome 
for Android. 


Content Type 


If the URL your are pointing your browser to ends in .svg the browser will be able to guess 
the mime type of the SVG file. However, when generating SVG from servlets, JSP, PHP, 
ASP.NET pages or other web application components, the URL ending may not always be 
SVQ. 


To make the browser still interpret the file as an SVG file you must set the Content - 
Type HTTP header of the response to 


image/svg+xml 


If you look at the <embed> element earlier you will notice that this is done too in the 


type attribute. Setting the content type in the <embed> element is enough for Internet 
Explorer, but not for Firefox. You must also set it in the content type on the HTTP 
response. 


In addition, if you point your browser directly to the SVG file on the server, there is no 


<embed> tag to do this for you. Then you will have to do it yourself by setting the content 
type in the HTTP response. 


Here is how it is done in JSP: 


<% response. setContentType("image/svg+xml1") ; 
%><SVE ... > 
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